<template>
    <div class="header">
  
      <div class="bread">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item to="/home" v-if="sy!='/home'">首页</el-breadcrumb-item>
          <el-breadcrumb-item 
          v-for="item in gl"  
          :to="item.path"> 
          {{ item.meta.title }}
        </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="info" v-if="userInfo">
          <span>欢迎{{userInfo.account}}登录</span>
          <el-avatar :size="30" :src="surl+userInfo.imgUrl" class="tx"/>
      </div>
    </div>
  </template>
  
  <script setup>
  import {ref,computed} from 'vue'
  import {accountInfo} from '@/api/account.js'
  import { surl } from '@/utils/common';
  import { useRoute } from 'vue-router';
  const route = useRoute()
  
  const user = JSON.parse(sessionStorage.getItem('user'))
  const userInfo = ref()
  
  const getAccountInfo =async ()=>{
    let res = await accountInfo({id:user.id})
    userInfo.value = res.accountInfo;
   
  }
  getAccountInfo()
  
  const gl = computed(()=>{
    let mathed = route.matched.filter((item)=>{
      return item.meta.notShow != true;
    })
    return mathed;
  })

  const sy = computed(()=>{
    return route.path;
  })

  </script>
  <style scoped lang="scss">
  .header{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    :deep(.el-breadcrumb){
      line-height: 50px;
    }
  }
  .info{
    display: flex;
  justify-content: center;
  align-items: center;
  }
</style>